<template>
	<view class="shopstore-detail order-pages rel" :style="{background:pageColor}" v-if="detail.info && detail.info.id">
		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
			style="z-index: 999;margin-top:25rpx;" v-if="options.pid">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->
		<image @tap.stop="previewImage(detail.info.cover,[detail.info.cover])" mode="aspectFill"
			class="cover-img" :src="detail.info.cover">
		</image>
		<view class="pd-lg fill-base">
			<view class="f-md-title c-black text-bold">{{detail.info.title || '-'}}</view>
			<view @tap.stop="$util.goUrl({url:`/shopstore/pages/store-info?id=${options.id}`})"
				class="flex-between pt-lg pb-lg b-1px-b">
				<view class="flex-y-center" style="color: #303030;">
					<i class="iconfont iconyingyezhizhao mr-sm"></i>
					营业执照：<view class="max-450 ellipsis">{{detail.info.attestation}}</view>
				</view>
				<i class="iconfont icon-right" style="font-size: 20rpx;"></i>
			</view>
			<view class="pt-lg pb-lg">
				<view class="flex-y-center" style="color: #303030;">
					<i class="iconfont iconyingyeshijian mr-sm"></i>
					营业时间：<view class="max-450 ellipsis">
						{{detail.info.start_time && detail.info.end_time ?`${detail.info.start_time} - ${detail.info.end_time}`:'暂未设置'}}
					</view>
				</view>
			</view>
			<view class="store-info flex-between pb-sm">
				<view class="flex-y-center" style="color: #303030;">
					<i class="iconfont icondizhi1 mr-sm"></i>
					<view class="c-title flex-1 mr-md">
						<span>{{detail.info.address || `暂未设置门店地址`}}</span>
						<span @tap.stop="toCopy(detail.info.address)" class="copy-btn span radius-5 f-icontext ml-sm"
							:style="{color:primaryColor,borderColor:primaryColor}" v-if="detail.info.address">复制</span>
					</view>
				</view>
				<view class="flex-center">
					<view @tap.stop="$util.goUrl({url:detail.info.phone,openType:'call'})"
						class="item-icon rel flex-center radius-16" v-if="detail.info.phone">
						<view class="item-icon radius-16 abs" :style="{background:primaryColor}"></view>
						<i class="iconfont icondadianhua_1" :style="{color:primaryColor}"></i>
					</view>
					<view @tap.stop="toMap" class="item-icon rel flex-center radius-16 ml-md"
						v-if="detail.info.address">
						<view class="item-icon radius-16 abs" :style="{background:primaryColor}"></view>
						<i class="iconfont icondizhi_1" :style="{color:primaryColor}"></i>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tab-box fill-base">
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
				:width="100/tabList.length + '%'" height="80rpx" bgColor="#fff" lineClass="mini"></tab>
		</view>

		<view class="pt-lg fill-base" id="scroll1">
			<view @tap.stop="$util.goUrl({url: `/shopstore/pages/service?id=${options.id}`})"
				class="flex-between pl-lg pr-md " :class="[{'pb-md': detail.service_list.length>0}]">
				<view class="flex-center">
					<view class="flex-center package-label">
						<text class="f-ms-little c-base">订</text>
					</view>
					<view class="f-paragraph c-black text-bold">预约项目</view> <!--recommend_text-->
				</view>
				<view class="flex-y-center f-caption c-caption">查看更多<i class="iconfont icongengduo"
						style="font-size: 24rpx;"></i></view>
			</view>


			<view class="pl-lg pr-lg radius-16 pt-sm fill-base" style="padding-bottom: 35rpx;" v-for="(item,index) in detail.service_list" :key="index">
				<longbingbing-service-list-item maxWidth="470rpx" :info="item" :o="{type:1}" :store_id="options.id"></longbingbing-service-list-item>
			</view>
			<abnor v-if="detail.service_list.length == 0" percent="70%"></abnor>
		</view>
		
		
		<view class="package fill-base mt-md" id="scroll2" v-if="packList.data.length > 0">
			<view class="package-top flex-between pl-md pr-sm" @tap="$util.goUrl({url: `/shopstore/pages/package/list?id=${options.id}`})">
				<view class="flex-center">
					<view class="flex-center package-label">
						<text class="f-ms-little c-base">团</text>
					</view>
					<text class="f-paragraph text-bold">团购项目</text>
				</view>
				<view class="flex-y-center f-caption c-caption">查看更多<i class="iconfont icongengduo"
						style="font-size: 24rpx;"></i></view>
			</view>
			<view class="flex-warp">
				<block v-for="(item,index) in packList.data" :key="index">
					<view class="package-item ml-sm mr-sm mb-md radius-16"
						@tap="$util.goUrl({url: `/shopstore/pages/package/detail?id=${item.id}&storeid=${options.id}&store=1&jump=${autograph?1:2}`})">
						<image :src="item.cover" mode="aspectFill" class="package-item-img"></image>
						<view class="pl-md pr-md">
							<view class="pt-md pb-sm f-desc text-bold">{{item.name}}</view>
							<view class="f-icontext c-caption">{{item.sub_name}}</view>
							<view class="flex-between" style="padding: 15rpx 0;">
								<view class="flex-y-center">
									<text class="f-icontext text-bold" style="color: #FF2404;">¥</text>
									<text class="f-ms-title text-bold" style="color: #FF2404;">{{item.price}}</text>
									<view class="package-discount f-ms-little ml-sm" v-if="item.discount">
										{{item.discount}}折</view>
								</view>
								<view class="f-caption c-base flex-center package-btn"
									:style="{background: primaryColor}">使用</view>
							</view>
							<view class="flex-between">
								<view class="c-caption f-icontext" style="text-decoration-line:line-through">￥{{item.init_price}}</view>
								<text class="f-icontext c-title">年售 {{item.sale | handerSale}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<abnor v-if="!packList.data.length"></abnor>
		</view>

		<view class="pt-lg pb-lg" id="scroll3" :class="[{'footer-h': app_model_type == 1}]">
			<view @tap.stop="$util.goUrl({url: `/shopstore/pages/technician?id=${options.id}`})"
				class="flex-between pl-lg pr-md" :class="[{'pb-lg':detail.coach_list.length > 0}]">
				<view class="f-paragraph c-black text-bold">{{$t('action.attendantName')}}展示</view>
				<view class="flex-y-center f-caption c-caption">查看更多<i class="iconfont icongengduo"
						style="font-size: 24rpx;"></i></view>
			</view>
			<view class="pl-lg pr-md fill-base pt-lg pb-lg" v-if="detail.coach_list.length > 0">
				<scroll-view scroll-x class="recommend-technician">
					<view @tap.stop="toTechnician(index)" class="recommend-item"
						v-for="(item,index) in detail.coach_list" :key="index">
						<!-- #ifdef H5 -->
						<view class="cover radius">
							<view class="h5-image cover radius" :style="{ backgroundImage : `url('${item.work_img}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius" :src="item.work_img"></image>
						<!-- #endif -->
						<view class="flex-center f-desc c-title mt-md">
							<view class="ellipsis">{{item.coach_name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<abnor v-if="detail.coach_list.length == 0" percent="70%"></abnor>
		</view>

		<view class="fill-base pl-lg pr-lg footer-h" id="scroll4" v-if="app_model_type != 1">
			<view class="comment-item flex-warp pt-lg" :class="[{'b-1px-t':index!=0}]" v-for="(item,index) in list.data"
				:key="index">
				<image mode="aspectFill" class="avatar radius" :src="item.avatarUrl"></image>
				<view class="flex-1 ml-md pb-lg">
					<view class="flex-between" style="height:52rpx">
						<view class="flex-y-center">
							<view class="f-paragraph c-title mr-md max-200 ellipsis">{{item.nickName}}</view>
							<view class="flex-warp">
								<i class="iconfont iconpingfen1 icon-font-color"
									:style="{backgroundImage: aindex< item.star?`-webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%)`:`-webkit-linear-gradient(270deg, #f4f6f8 0%, #ccc 100%)`}"
									v-for="(aitem,aindex) in 5" :key="aindex"></i>
							</view>
						</view>
						<view class="f-icontext c-caption">{{item.create_time}}</view>
					</view>
					<view class="flex-warp mt-sm">
						<view class="pt-sm pb-sm pl-md pr-md mt-sm mr-sm radius fill-body f-caption c-desc"
							v-for="(item,index) in item.lable_text" :key="index">{{item}}</view>
					</view>
					<view class="f-caption c-caption mt-md">
						<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
					</view>
				</view>
			</view>
			<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
				v-if="loading">
			</load-more>
			<abnor percent="70%" :tip="[{text: '暂无评价数据'}]" v-if="!loading&&list.data.length<=0&&list.current_page==1">
			</abnor>
		</view>

		<view class="space-footer"></view>

		<!-- #ifdef APP-PLUS -->
		<view @tap.stop="toAppShare"
			class="common-share-btn detail fix flex-center flex-column c-base box-shadow radius"
			:style="{background:primaryColor}">
			<i class="iconfont iconweixin"></i>
			<view class="f-icontext">分享</view>
		</view>
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import longbingbingServiceListItem from "@/components/longbingbing-service-list-item.vue"
	export default {
		components: {
			longbingbingServiceListItem
		},
		data() {
			return {
				options: {},
				detail: {},
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				packList: {
					data: []
				},
				loading: true,
				tabList: [{
					title: '预约',
					id: 0
				}, {
					title: '团购',
					id: 1
				}, {
					title: '工作者',
					id: 2,
				}, {
					title: '评价',
					id: 3,
				}],
				activeIndex: 0,
				scroll: {
					0: 0,
					1: 0,
					2: 0,
					3: 0
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			let launch = 0
			// #ifdef MP-WEIXIN 
			let {
				scene
			} = await uni.getLaunchOptionsSync()
			launch = scene // 1154：朋友圈
			options.launch = launch
			// #endif
			options = await this.updateCommonOptions(options)
			let {
				pid = 0
			} = options
			options.pid = pid * 1
			this.options = options
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif 
					this.updateUserItem({
						key: 'appShare',
						val: true
					})
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh();
					uni.stopPullDownRefresh()
				},
				onReachBottom() {
					if (this.list.current_page >= this.list.last_page || this.loading) return;
					this.param.page = this.param.page + 1;
					this.loading = true;
					this.getList();
				},
				onShareTimeline() {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail.info
					let query = `pid=${pid}&id=${id}`
					return {
						title,
						imageUrl,
						query
					}
				},
				onShareAppMessage(e) {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail.info
					let path = `/shopstore/pages/detail?pid=${pid}&id=${id}`
					this.$util.log(path)
					return {
						title,
						imageUrl,
						path,
					}
				},
				onPageScroll(e) {
					let number = 0
					// #ifdef H5
					number = 5
					// #endif
					// #ifndef H5
					number = 62
					// #endif
					if(this.scroll[1] - number >= e.scrollTop){
						this.activeIndex = 0
					}else if(this.scroll[2] - number >= e.scrollTop){
						this.activeIndex = this.packList.data.length == 0 ? 0: 1
					}else if(this.scroll[3] - number >= e.scrollTop){
						this.activeIndex = this.packList.data.length == 0 ? 1 : 2
					}else{
						this.activeIndex = this.packList.data.length == 0 ? 2 : 3
					}
				},
				filters: {
					handerSale(val) {
						if (val < 10) {
							return val
						}
						if (val < 10000) {
							return (val / 10).toFixed(0) * 10 + '+'
						}
						return val > 10000 ? (val / 10000).toFixed(1) + 'w+' : val
					}
				},
				methods: {
					...mapActions(['getConfigInfo', 'getUserInfo', 'addScanRecord',
						'updateScanRecord', 'updateCommonOptions'
					]),
					...mapMutations(['updateTechnicianItem', 'updateUserItem']),
					async initIndex(refresh = false) {
						let {
							pid = 0,
								launch = 0
						} = this.options
						let code = this.scanRecordId
						// #ifdef H5
						code = this.$util.getQueryString('code')
						// #endif 
						if (pid && !code) {
							this.addScanRecord({
								type: 2,
								qr_id: pid,
								is_qr: 0
							})
						}

						let {
							id: uid = 0
						} = this.userInfo

						if (!this.configInfo.id || refresh || (pid && code && !uid)) {
							await this.getConfigInfo()
						}
						if (launch != 1154 && pid && !code && !uid) {
							await this.getUserInfo()
						}
						if(this.app_model_type == 1){
							let ind = this.tabList.findIndex(item => {
								return item.id == 3
							})
							if(ind != -1){
								this.tabList.splice(ind, 1)
							}
						}
						await Promise.all([this.getDetail(), this.getList(), this.getStorePackList()])
						if(this.packList.data.length == 0){
							let ind = this.tabList.findIndex(item => {
								return item.id == 1
							})
							if(ind != -1){
								this.tabList.splice(ind, 1)
							}
						}else {
							let ind = this.tabList.findIndex(item => {
								return item.id == 1
							})
							if(ind == -1){
								this.tabList.splice(1, 0 , {
									title: '团购',
									id: 1
								})
							}
						}
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						// #ifdef H5 
						this.$jweixin.initJssdk(() => {
							this.toAppShare()
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.showShareMenu({
							menus: ['shareAppMessage', 'shareTimeline']
						})
						// #endif
						setTimeout(() => {
							let that = this
							const query = uni.createSelectorQuery().in(this);
							query.select('#scroll1').boundingClientRect(res => {
								that.scroll[0] = res ? Math.floor(res.top) : 0
							}).exec();
							if(this.packList.data.length > 0){
								query.select('#scroll2').boundingClientRect(res => {
									that.scroll[1] = Math.floor(res.top)
								}).exec();
							}
							query.select('#scroll3').boundingClientRect(res => {
								that.scroll[2] = Math.floor(res.top)
							}).exec();
							query.select('#scroll4').boundingClientRect(res => {
								that.scroll[3] = Math.floor(res.top)
							}).exec();
						},600)
					},
					async handerTabChange(index) {
						let scrollTop = 0
						let newIndex = index
						if(this.packList.data.length == 0){
							newIndex = index > 0 ? index+1 : index
						}
						// #ifdef H5 
						scrollTop = this.scroll[newIndex]
						// #endif
						// #ifndef H5
						scrollTop = this.scroll[newIndex] - 40
						// #endif
						await uni.pageScrollTo({
							scrollTop ,
							duration: 0
						})
						this.$nextTick(()=>{
							this.activeIndex = index
						})
					},
					initRefresh() {
						this.param.page = 1
						this.initIndex(true)
					},
					async getStorePackList() {
						let data = await this.$api.shopstore.storePackList({
							store_id: this.options.id,
							page: 1,
							limit: 4
						})
						this.packList = data
					},
					toAppShare() {
						let {
							id: pid = 0
						} = this.userInfo
						let {
							id,
							title,
							cover: imageUrl
						} = this.detail.info
						let summary = ''

						let {
							siteroot
						} = siteInfo
						let url = siteroot.split('/index.php')[0]
						let href = `${url}/h5/#/shopstore/pages/detail?id=${id}&pid=${pid}`

						// #ifdef H5
						this.$jweixin.showOptionMenu()
						this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
						this.$jweixin.shareTimelineMessage(title, href, imageUrl)
						// #endif
						// #ifdef APP-PLUS
						let item = {
							href,
							title,
							summary,
							imageUrl,
						}
						if (this.configInfo.isIos) {
							this.$util.showLoading()
							this.toTransImg(item)
						} else {
							this.sharePage(item)
						}
						// #endif
					},
					toTransImg(item) {
						let that = this
						let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
						uni.downloadFile({
							url: item.imageUrl,
							success: (e) => {
								// 将png转换成jpg格式 只有jpg格式支持压缩api
								plus.zip.compressImage({
										src: e.tempFilePath,
										dst: `_doc/${cur_unix}.jpg`,
										format: "jpg"
									},
									response => {
										// 压缩图片
										plus.zip.compressImage({
											src: response.target,
											dst: `_doc/${cur_unix}-img.jpg`,
											quality: 50,
										}, res => {
											item.imageUrl = res.target || `/static/img/logo.png`
											that.sharePage(item)
										}, error => {
											item.imageUrl = `/static/img/logo.png`
											that.sharePage(item)
										})
									})
							}
						})
					},
					sharePage(item) {
						this.$util.hideAll()
						let {
							href,
							title,
							summary,
							imageUrl,
						} = item
						uni.share({
							provider: "weixin",
							scene: 'WXSceneSession',
							type: 0,
							href,
							title,
							summary,
							imageUrl,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					},
					async getDetail() {
						let {
							id
						} = this.options
						let data = await this.$api.shopstore.storeInfo({
							id
						})
						this.detail = data
						this.$util.hideAll()
					},
					async getList() {
						let {
							list: oldList,
							param,
						} = this
						let {
							id
						} = this.options
						param.id = id
						let newList = await this.$api.shopstore.commentList(param);

						if (this.param.page == 1) {
							this.list = newList
						} else {
							newList.data = oldList.data.concat(newList.data)
							this.list = newList
						}
						this.loading = false
						this.$util.hideAll()
					},
					previewImage(current, urls) {
						// #ifdef APP-PLUS 
						if (plus.os.name == 'Android' && plus
							.navigator.checkPermission(
								'android.permission.WRITE_EXTERNAL_STORAGE'
							) ===
							'undetermined') {
							this.$refs.preview_image_item
								.previewImage({
									current,
									urls
								})
						} else {
							this.$util.previewImage({
								current,
								urls
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.previewImage({
							current,
							urls
						})
						// #endif
					},
					// 查看定位
					async toMap() {
						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck) {
							this.$refs.user_privacy.open()
							return
						}
						// #endif
						let {
							address,
							lat,
							lng
						} = this.detail.info
						await this.$util.checkAuth({
							type: 'userLocation'
						})
						await uni.getLocation({
							type: 'gcj02',
						})
						await uni.openLocation({
							latitude: lat * 1,
							longitude: lng * 1,
							name: address,
							scale: 28
						})
					},
					toTechnician(index) {
						let {
							id,
							city_id,
							coach_name
						} = this.detail.coach_list[index]
						this.$util.goUrl({
							// url: `/user/pages/technician-info?id=${id}`
							url: `/userA/pages/worker-data?id=${id}`
							
						})
					},
					toCopy(url) {
						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck) {
							this.$refs.user_privacy.open()
							return
						}
						// #endif
						this.$util.goUrl({
							url,
							openType: 'copy'
						})
					}
				}
		}
</script>


<style lang="scss">
	.shopstore-detail {
		.cover-img {
			width: 750rpx;
			height: 417rpx;
		}

		.iconyingyezhizhao,
		.iconyingyeshijian,
		.icondizhi1 {
			color: #A2A2A2;
		}

		.recommend-technician {
			white-space: nowrap;
			width: 690rpx;

			.recommend-item {
				width: 133rpx;
				margin-left: 30rpx;
				display: inline-block;

				.cover {
					width: 133rpx;
					height: 133rpx;
				}

				.ellipsis {
					max-width: 133rpx;
				}
			}

			.recommend-item:nth-child(1) {
				margin-left: 0;
			}
		}

		.comment-item {
			.avatar {
				width: 52rpx;
				height: 52rpx;
				background: #f4f6f8;
			}

			.iconpingfen1 {
				font-size: 28rpx;
				margin-right: 5rpx;
				font-size: 28rpx;
			}
		}
		
		.tab-box{
			position: sticky;
			width: 100%;
			z-index: 9;
			top: 0;
			height: 100rpx;
		}
		
		.package-label {
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			background: #FF2404;
			margin-right: 10rpx;
		}
		
		.package {
			padding: 0 10rpx 20rpx 10rpx;
		
			.package-top {
				height: 90rpx;
			}
		
			.package-item {
				width: calc(50% - 20rpx);
				overflow: hidden;
				padding-bottom: 26rpx;
				border: 1px solid #F2F2F2;
		
				.package-item-img {
					height: 230rpx;
					width: 100%;
				}
		
				.package-btn {
					width: 86rpx;
					height: 46rpx;
					border-radius: 46rpx;
				}
		
				.package-discount {
					padding: 0px 8rpx;
					border-radius: 4rpx;
					color: #FE2D2D;
					border: 1px solid #FE2D2D;
				}
			}
		}
		.footer-h{
			min-height: calc(100vh - 100rpx);
		}
	}
</style>